<template>
  <div class="space-y-3">    
    <div class="space-y-3">
      <!-- 文件夹名称 -->
      <div class="flex items-center space-x-2">
        <div class="flex-1 relative">
          <input 
            v-model="folderName" 
            placeholder="文件夹名称" 
            class="w-full px-3 py-2 pl-10 border rounded text-sm"
          >
          <svg class="absolute left-3 top-2.5 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-5l-2-2H5a2 2 0 00-2 2z"></path>
          </svg>
        </div>
        <button @click="selectFolder" class="px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm rounded-lg transition-colors" title="选择文件夹">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-5l-2-2H5a2 2 0 00-2 2z"></path>
          </svg>
        </button>
      </div>
      
      <!-- 标记规则 -->
      <div class="space-y-2">
        <label class="flex items-center space-x-2">
          <input type="checkbox" v-model="markOtherDirectories" class="w-4 h-4 text-blue-600 border-gray-300 rounded">
          <span class="text-sm text-gray-700">标记其它目录中所有与此目录重复的文件</span>
        </label>
        
        <label class="flex items-center space-x-2">
          <input type="checkbox" v-model="invertCurrentFolder" class="w-4 h-4 text-blue-600 border-gray-300 rounded">
          <span class="text-sm text-gray-700">且反选 (取消选中) 该文件夹中的文件</span>
        </label>
        
        <button @click="markByOtherDirectories" class="w-full px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white text-sm rounded-lg">
          标记
        </button>
      </div>
      
      <div class="border-t pt-3 space-y-2">
        <label class="flex items-center space-x-2">
          <input type="checkbox" v-model="markCurrentFolder" class="w-4 h-4 text-blue-600 border-gray-300 rounded">
          <span class="text-sm text-gray-700">标记所有此文件夹中与其他位置相同的项目</span>
        </label>
        
        <label class="flex items-center space-x-2">
          <input type="checkbox" v-model="invertOtherLocations" class="w-4 h-4 text-blue-600 border-gray-300 rounded">
          <span class="text-sm text-gray-700">且反选 (取消选中) 其他位置的文件</span>
        </label>
        
        <button @click="markByCurrentFolder" class="w-full px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white text-sm rounded-lg">
          标记
        </button>
      </div>
      

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { invoke } from '@tauri-apps/api/tauri'

const folderName = ref('')
const markOtherDirectories = ref(false)
const invertCurrentFolder = ref(false)
const markCurrentFolder = ref(false)
const invertOtherLocations = ref(false)

// 定义emits
const emit = defineEmits<{
  'mark-location-files': [data: {
    folderName: string
    markOtherDirectories: boolean
    invertCurrentFolder: boolean
    markCurrentFolder: boolean
    invertOtherLocations: boolean
    action: 'other' | 'current'
  }]
}>()

const markByOtherDirectories = () => {
  if (folderName.value.trim()) {
    console.log('按其他目录标记:', {
      folderName: folderName.value,
      markOtherDirectories: markOtherDirectories.value,
      invertCurrentFolder: invertCurrentFolder.value
    })
    
    emit('mark-location-files', {
      folderName: folderName.value,
      markOtherDirectories: markOtherDirectories.value,
      invertCurrentFolder: invertCurrentFolder.value,
      markCurrentFolder: false,
      invertOtherLocations: false,
      action: 'other'
    })
  }
}

const markByCurrentFolder = () => {
  if (folderName.value.trim()) {
    console.log('按当前文件夹标记:', {
      folderName: folderName.value,
      markCurrentFolder: markCurrentFolder.value,
      invertOtherLocations: invertOtherLocations.value
    })
    
    emit('mark-location-files', {
      folderName: folderName.value,
      markOtherDirectories: false,
      invertCurrentFolder: false,
      markCurrentFolder: markCurrentFolder.value,
      invertOtherLocations: invertOtherLocations.value,
      action: 'current'
    })
  }
}

// 选择文件夹
const selectFolder = async () => {
  try {
    console.log('开始选择目录...')
    const result = await invoke('select_directory')
    console.log('API调用结果:', result)
    
    if (result && typeof result === 'object' && 'path' in result) {
      const pathData = result as { path: string; error: string | null }
      if (pathData.error) {
        console.error('选择目录失败:', pathData.error)
        return
      }
      
      folderName.value = pathData.path
      console.log('选择的路径:', pathData.path)
    }
  } catch (error) {
    console.error('选择目录时出错:', error)
  }
}
</script>
